<template >
  <!--主容器-->
  <el-container class="main-class" >
    <!--头部信息-->
    <el-header>
      <el-row style="height: 100%">
        <el-col :span="2" style="height: 100%" >
          <el-avatar :size="60" :src="avatar.startsWith('http')?avatar:this.$qiniu+avatar"/>
        </el-col>
        <el-col :span="15" class="title">
          个人医疗信息系统<span>———管理员({{name}})</span>
        </el-col>
        <el-col :span="7" class="logout">
          <el-button type="info" @click="logout">退出登录</el-button>
        </el-col>
      </el-row>
    </el-header>
    <!--主体容器-->
    <el-container>
      <!--侧边栏-->
      <el-aside :width="menuActive?'200px':'60px'">
        <div class="menu-button" @click="menuActive=!menuActive" >
          <i class="el-icon-s-fold"></i>
        </div>
        <el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          unique-opened
          router
          text-color="#fff"
          :collapse="!menuActive"
          active-text-color="#ffd04b">
          <el-submenu :index="index+''" v-for="(parentMenu,index) in menus" :key="index">
            <template slot="title">
              <i :class="parentMenu.icon" style="margin-right: 5px"/>
              <span>{{ parentMenu.title }}</span>
            </template>
            <el-menu-item :index="childrenMenu.path" v-for="(childrenMenu,i) in parentMenu.children" :key="i" @click="savePath(childrenMenu.path)">
                <template slot="title">
                  <i :class="childrenMenu.icon" style="margin-right: 5px"/>
                  <span>{{ childrenMenu.title }}</span>
                </template>
            </el-menu-item>

          </el-submenu>

        </el-menu>
      </el-aside>
      <!--主体-->
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,index) in $router.currentRoute.matched" :key="index" >{{item.meta.title}}</el-breadcrumb-item>

        </el-breadcrumb>
        <span v-show="$router.currentRoute.path==='/'||$router.currentRoute.path==='/home'" class="main-title">欢迎来到个人医疗信息系统！</span>
        <!--作为子路由-->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>


</template>

<script>
import  {mapState} from 'vuex';

export  default {
  //vue计算属性
  computed:{
     ...mapState(['name','avatar','menus'])
  },


  created() {

   // console.log('菜单',this.menus);
  },
  data(){
    return{
      //是否展开菜单
      menuActive:true,
      //激活的菜单
      activePath:sessionStorage.getItem('activePath'),
    }
  },
  methods:{
    logout(){
          this.$confirm('您将退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
              //调后端的退出接口
            this.$ajax.get('/user/logout').then((res)=>{
                   //清空本地缓存
              sessionStorage.clear();
              //跳转到登录页面
              this.$router.replace('login');
              this.$message.success(res.data.message);
              window.location.reload();
            });

          }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消退出'
            });
          });
    },
    /*保存被激活的链接*/
    savePath(path){
      sessionStorage.setItem('activePath',path);
      this.activePath=path;

    }
  }
}
</script>
/*scoped 受保护的样式，当前style下的样式只在当前组件生效，其他组件无法使用，避免样式污染*/
<style   scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #333;

}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;

}
/*主容器样式*/
.main-class{
  height: 100%;

}
.title{
  text-align: left;
  font-size: 25px;
  font-family: 华文行楷;
}
.logout{
  text-align: right;
}
.menu-button{
  font-size: 20px;
  background-color:#2e363f;
  color: #fff;
  cursor: pointer;

}
.main-title{
  margin-top:20% ;
  font-size: 60px;
  font-family: 华文行楷;
  color: chocolate;


}
.el-submenu .el-menu-item {
  background-color:#42b983 ;
  padding: 0;

}
</style>
